<%-- 
    Document   : login
    Created on : 15/09/2014, 20:55:39
    Author     : luiz
--%>

<%@page import="java.io.File"%>
<%@page import="java.io.File"%>
<%@page import="util.Captcha"%>
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Login</title>
    </head>
    <body>
        <style type="text/css">
            body{
                width: 100%;
                height: 100%;
                margin: 0 auto;
                background-color: #00313B;
                background-image: url(imagens/background.png);
            }
            .conteudo{
                width: 100%;
                height: 50%;

            }
            .logomarca{
                margin: 0 auto;
            }
            .formulario{
                width: 303px;
                position: absolute;
                top: 50%;
                left: 50%;
                margin: -160px -166px;
                border: solid 1px #333333;
                background: #1e1e1e;
                background: rgba(30, 30, 30, 0.59);
                padding: 22px 32px;
                color: #eeeeee;
                text-align: left;
                -moz-border-radius: 8px;
                -webkit-border-radius: 8px;
                border-radius: 8px;
                -moz-box-shadow: 0 0 18px rgba(0, 0, 0, 0.9);
                -webkit-box-shadow: 0 0 18px rgba(0, 0, 0, 0.9);
                box-shadow: 0 0 18px rgba(0, 0, 0, 0.9);
            }
            input{
                margin-bottom: 9px;
                padding: 5px 6px;
                border-bottom-left-radius: 5px;
                border-bottom-right-radius: 5px;
                border-top-left-radius: 5px;
                border-top-right-radius: 5px;
                width: 300px;
            }
            .botao{
                cursor: pointer;
                padding: 6px 16px;
                border: 1px solid #222222;
                color: white;
                margin: 0;
                background-color: #00313B;
                -moz-border-radius: 4px;
                -webkit-border-radius: 4px;
                border-radius: 4px;
                -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1), 0 1px 1px rgba(155, 155, 155, 0.4) inset;
                -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1), 0 1px 1px rgba(155, 155, 155, 0.4) inset;
                box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1), 0 1px 1px rgba(155, 155, 155, 0.4) inset;
            }
            p{
                margin: 0 auto;
                width: 275px;
            }

            .clear{
                clear: both;
            }
            .texto{
                margin-top: 203px;
                color: #ffffff;
                font-size: 15px;
            }
            a{
                text-decoration: none;
            }
            a:hover{
                text-decoration: underline;
            }
            span a{
                color: #ffffff;
                font-size: 20px;
                float: right;
            }
        </style>
        <%
            Captcha c = new Captcha();
            Double num = (Math.random() * 10000);
            String caminhoServer = request.getServletContext().getRealPath(File.separator);
            String nome = num.intValue() + ".jpg";
            File local = new File(caminhoServer + "\\img\\" + nome);
            local.createNewFile();
            c.salvar(local);


        %> 
        <div class="conteudo">
            <!--<div class="logomarca">
                    <img src="imagens/logo.png" width="30%" />
            </div>-->
            <div class="formulario">
                <form method='post' action="ValidaLoginServlet">
                    <label for="login">Nome do Usuário</label><br>
                    <input type="text" placeholder="Usuário" name='login'  >
                    <br>
                    <label for="senha">Senha</label><br>
                    <input type="password" placeholder="Senha" name='senha'  >
                    <br>
                    <div>
                        <center>     
                            <div style="border-width: 1px; width: 160px; padding: 10px 10px 10px 10px">
                                <center>
                                    <img src='img/<%=nome%>'>
                                </center>
                                </br>  
                                <input type="button" onclick="location.reload();" value="Atualizar" style="width: 75px"/>
                                <input type="button" onclick="pickSong(0)" value="Ouvir" style="width: 75px"/>
                                </br>
                                <input type='text' name='digitado' placeholder="Digite as Letras" style="width: 130px" onkeyup="this.value = this.value.toUpperCase();">
                                </br>
                                <input type="hidden" name="codigo" value="<%=c.getFrase()%>">
                                </br>
                            </div>
                        </center>
                        <%local.deleteOnExit();%>
                        <audio controls="controls" hidden style="width: 150px"></audio>
                        <input type="submit" class="botao" name="Acessar"/>
                        <div style="color:red">${errorMessage}</div>
                        <span><a href="CadastroUsuario.jsp">Cadastre-se</a></span>
                    </div>
                </form>
                <div class="clear"></div>
            </div>
            <script>
                var urls = new Array();
                urls[0] = 'http://localhost:8080//ProjetoIntegrador//song//alfabeto//<%=c.getFrase().toLowerCase().charAt(0)%>.ogg';
                urls[1] = 'http://localhost:8080//ProjetoIntegrador//song//alfabeto//<%=c.getFrase().toLowerCase().charAt(1)%>.ogg';
                urls[2] = 'http://localhost:8080//ProjetoIntegrador//song//alfabeto//<%=c.getFrase().toLowerCase().charAt(2)%>.ogg';
                urls[3] = 'http://localhost:8080//ProjetoIntegrador//song//alfabeto//<%=c.getFrase().toLowerCase().charAt(3)%>.ogg';
                urls[4] = 'http://localhost:8080//ProjetoIntegrador//song//alfabeto//<%=c.getFrase().toLowerCase().charAt(4)%>.ogg';


                var current = 0;

                function pickSong(num) {
                    current = num;
                    playSong();
                }

                function nextSong() {

                    if (current >= urls.length - 1) {

                    } else {
                        current++;
                        playSong();
                    }
                }

                function playSong() {
                    audioPlayer.src = urls[current];
                    audioPlayer.load();
                    audioPlayer.play();
                }

                var audioPlayer = document.getElementsByTagName('audio')[0];

                audioPlayer.addEventListener('ended', nextSong, false);
                audioPlayer.addEventListener('error', nextSong, true);
            </script>
    </body>
</div>
</html>
